<template>
	<view class="">
		<view class="u-skeleton">
			<view class="u-skeleton-fillet" style="width: 100%;height: 650rpx;">
				<image style="width: 100%;height: 100%;" :src="order.avatar" mode="aspectFill"></image>
			</view>
			<!-- <swiper class="swiper" :autoplay="true" interval="2000" duration="500" :circular="true"
				style="width: 100%;height: 400rpx;">
				<swiper-item v-for="(item,index) in order.addressImg" :key='index'
					@click="saveImg(order.addressImg, index)">
					<image :src="item" mode="aspectFill" style="width: 100%;"></image>
				</swiper-item>
			</swiper> -->
			<view class=" bgs u-skeleton-fillet">
				<view class="padding bg radius ">
					<view class="flex justify-between margin-top-sm">
						<view class="flex align-center">
							<view style="color: #000000;font-size: 34upx;" class="text-bold">{{order.name}}
							</view>
							<!-- <view class="margin-left"
								style="background: #e5edff;color: #8fadff;padding: 8upx 16upx;" v-if="order.distance">
								距离{{order.distance}}
							</view> -->
							<view class="margin-left" style="color: #333333;padding: 8upx 16upx;" v-if="order.distance">
								距离{{order.distance}}
							</view>
						</view>
						<!-- <view class="margin-left-sm" @click="goTousu(order.userId)">
							<image src="../../../static/images/index/tousu.png" mode="widthFix"
								style="width: 33rpx;height: 35rpx;"></image>
						</view> -->
						<view>服务次数:{{order.serviceNum?order.serviceNum:'0'}}</view>
					</view>
					<view class="flex align-center flex-wrap margin-top-sm">
						<view class="lab margin-bottom-xs" v-for="(ite,ind) in order.label" :key="ind">{{ite}}</view>
						<view class="lab margin-bottom-xs">{{order.age}}岁</view>
					</view>
					<view class="flex align-center margin-top">
						<u-rate :count="5" v-model="order.score" :disabled="true"></u-rate>
						<view>{{order.score?order.score:'0'}}分</view>
					</view>
					<!-- <view class="flex margin-top-xs">
						<view class="flex align-center" @tap="bindGps(order.latitude,order.longitude,order.address)">
							<image src="../../../static/images/my/address.png" style="width: 45upx;height: 45upx;">
							</image>
							<view class="margin-left-xs" style="font-size: 26upx;">{{order.address}}</view>
						</view>
						<view class="" @click="bindphone(order.shopPhone)">
							<image src="../../../static/images/index/phone.png" style="width: 28upx;height:35upx;">
							</image>
						</view>
					</view> -->
					<!-- 	<view class="flex margin-top">
						<image :src="order.shopImg?order.shopImg:'../../../static/logo.png'"
							style="width: 140upx;height: 140upx;border-radius: 12upx;" mode="aspectFill"></image>
						<view class="margin-left-sm">
							<view>商家信息</view>
							<view class="margin-tb-xs">营业时间：工作日{{order.startTime}}—{{order.endTime}}</view>
							<view>商家品类：{{order.shopType}}</view>
						</view>
					</view> -->
					<view class="flex align-center padding-tb-sm padding-lr margin-top"
						style="background: #e1f0fa;border-radius: 24rpx;">
						<view class="rir">
							<!-- 安心购 -->
							<image
								src="https://jiazhengv5.xianmaxiong.com/img/20230804/bca44b90cd844c0cab91ac0fd26afbe6.png"
								style="width: 87rpx;height:29rpx;"></image>
						</view>
						<view class="flex align-center" style="margin-right: 30upx;">
							<image src="../static/renz1.png" style="width: 32upx;height: 28upx;">
							</image>
							<text class="margin-left-xs">实名认证</text>
						</view>
						<view class="flex align-center" style="margin-right: 30upx;">
							<image src="../static/renz2.png" style="width:28upx;height: 33upx;"></image>
							<text class="margin-left-xs">资质认证</text>
						</view>
						<view class="flex align-center">
							<image src="../static/renz3.png" style="width: 28upx;height: 32upx;">
							</image>
							<text class="margin-left-xs">平台担保</text>
						</view>
					</view>
				</view>
				<view class="bg padding-lr padding-tb-sm margin-bottom-sm" style="margin-top: 20rpx;">
					<view class="text-bold" style="font-size: 35rpx;letter-spacing: 3rpx;">自我介绍</view>
					<view class="margin-top" style="color: #666666;font-size: 28rpx;">
						{{order.details}}
					</view>
				</view>
				<!-- <view class="flex justify-between margin-top-xs bg padding-sm radius  "
					v-for="(item,index) in orderList" :key='index' @click="goOrder(item)">
					<image :src="item.homepageImg?item.homepageImg: '../../static/logo.png'"
						style="width: 200rpx;height: 200rpx;border-radius: 10rpx;" mode="aspectFill"></image>
					<view class="flex-sub margin-left text-white flex flex-direction justify-between">
						<view class="flex align-center">
							<image src="../../../static/images/qi.png" style="width: 80rpx;height: 40rpx;"></image>
							<view class="margin-right-xs u-line-1"
								style="display: inline-block;margin-left: 10rpx;width: 340rpx;">
								{{item.myLevel}}
							</view>
						</view>
						<view class="flex flex-wrap radius" style="line-height: 34upx;">
							<view class="margin-right-xs"
								style="background: #FBEBF0;color: #FF2D01;padding: 10upx 16upx;" v-if="item.distance">
								距离{{item.distance}}km
							</view>
							<view v-for="(ite,ind) in item.gameName" :key="ind" style="margin:8rpx 5rpx 5rpx 0rpx;">
								<view style="background: #FBEBF0;color: #FF2D01;padding: 10upx 16upx;">
									{{ite}}
								</view>
							</view>
						</view>
						<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
							<view
								style="color:#FF1200;font-size: 24rpx;font-family: PingFang-SC-Bold;letter-spacing: 2rpx;">
								<text
									style="font-size: 38rpx;font-weight: bold;">{{isVip? item.memberMoney :item.money}}</text>元/<text>{{item.unit}}</text>
							</view>
							<view style="color: #999999;font-size: 26upx;" v-if="item.count">
								已售{{item.count}}
							</view>
						</view>
					</view>
				</view> -->

				<view class="margin-top-sm padding bg text-white radius u-skeleton-fillet">
					<view class="text-lg">用户评价</view>
					<view v-if="commentList.length<=0" class="margin-top-sm"> 暂无评价</view>
					<view class="margin-tb-sm" v-for="(item, index) in commentList" :key='index' v-else>
						<view class="flex justify-between">
							<u-avatar :src="item.avatar" size="48"></u-avatar>
							<view class="flex-sub margin-left-sm" style="line-height: 46upx;">{{item.userName}}</view>
							<view class="flex">
								<u-icon v-for="ite in item.satisfactionFlag" :key='ite' color="#2087fe"
									name="star-fill"></u-icon>
							</view>
						</view>
						<view class="margin-top-sm">{{item.evaluateMessage}}</view>
						<view class="margin-top-xs flex flex-wrap">
							<view class="margin-right-xs margin-bottom-xs" v-for="(img,ind) in item.evaluateImg.split(',')"
								:key="ind" @click="saveImg(item.evaluateImg,ind)">
								<image :src="img" mode="aspectFill" style="width: 200rpx;height: 200rpx;"></image>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="u-skeleton-fillet text-lg cu-bar foot bg padding-lr" v-if="myId != order.userId">
				<view class="text-center" @click="goDet()"
					style="width: 665upx;line-height: 78upx;background: #2087fe;border-radius:39upx;margin: 0 auto;color: #FFFFFF;">
					下单
				</view>
			</view>
			<!-- <view @click="share" class="btn">分享好友</view> -->
		</view>
		<!-- <u-picker v-model="show" mode="time" :params="params" @confirm="statusChange"></u-picker> -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		onShareAppMessage(res) {
			return {
				path: '/package/pages/shop/sfdetail?invitation=' + this.invitationCode + '&sfUserId=' + this
					.sfUserId, //这是为了传参   onload(data){let id=data.id;} 
				title: this.order.name,
				imageUrl: this.order.avatar
			}
		},
		onShareTimeline(res) {
			return {
				path: '/package/pages/shop/sfdetail?invitation=' + this.invitationCode + '&sfUserId=' + this
					.sfUserId, //这是为了传参   onload(data){let id=data.id;} 
				title: this.order.name,
				imageUrl: this.order.avatar
			}
		},
		data() {
			return {
				// game: [],
				loading: true, // 是否显示骨架屏组件
				// customStyle: {
				// 	width: '400upx',
				// 	color: '#FFFFFF',
				// 	background: "#2087fe",
				// 	border: 0
				// },
				// id: '',
				// orderDet: {},
				page: 1,
				limit: 10,
				order: {},
				commentList: [],
				// isFollow: false,
				myId: '',
				// isVip: false,
				// AUDIO: uni.createInnerAudioContext(),
				// isPlay: false,
				// show: false,
				// params: {
				// 	year: false,
				// 	month: true,
				// 	day: true,
				// 	hour: true,
				// 	minute: true,
				// 	second: true,
				// 	timestamp: true
				// },
				// startTime: '',
				// mobile: '',
				// name: '',
				// cityaddress: '',
				// detailaddress: '',
				// latitude: '',
				// longitude: '',
				// province: '',
				// city: '',
				// district: '',
				sfUserId: '',
				// orderList: [],
				invitationCode: '',
				// title: ''
				classifyList: [],
				token: ''
			}
		},
		onLoad(option) {
			// this.$queue.showLoading("加载中...");
			this.invitationCode = this.$queue.getData('invitationCode');
			this.sfUserId = option.sfUserId
			console.log("sfUserId", option.sfUserId);
			// #ifdef MP-WEIXIN
			if (option.scene) {
				const scene = decodeURIComponent(option.scene);
				this.$queue.setData('inviterCode', scene.split(',')[0]);
			}
			// #endif

			// 获取邀请码保存到本地
			if (option.invitation) {
				this.$queue.setData('inviterCode', option.invitation);
			}
			this.token = uni.getStorageSync('token')
			this.getDet()

			this.getOrderComment()
			this.getorderlist()
			this.myId = uni.getStorageSync('userId')
			this.isVip = uni.getStorageSync('isVIP')

		},
		onShow() {

		},
		methods: {
			getClassifyList() {
				this.$Request.getT('/app/fixedClassify/getClassifyListByUserId?userId=' + this.order.userId).then(res => {
					if (res.code == 0) {
						this.classifyList = res.data
					}
				});
			},
			goDet() {
				if (this.token) {
					// console.log(this.classifyList.length<=0 )
					if (this.classifyList.length <= 0) {
						uni.showToast({
							title: '当前师傅未绑定服务分类',
							icon: 'none'
						})
						return
					}
					uni.navigateTo({
						url: '/my/publish/sfDet?sfuserId=' + this.order.userId
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
			// 服务投诉
			goTousu(userId) {
				uni.navigateTo({
					url: '/my/order/complain?byUserId=' + userId + '&platform=4&platformId=' + this.id
				});
			},
			//详情图片放大
			saveImg(imgs, index) {
				let that = this;
				let imgArr = imgs
				// //预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index]
				});
			},
			// 拨打电话
			bindphone(phone) {
				let that = this

				uni.showModal({
					title: '提示',
					content: '是否拨打电话',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', that.phone);
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 一键导航
			bindGps(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			// 详情
			getDet() {
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				});
				let data = {
					id: this.sfUserId,
					latitude: uni.getStorageSync('latitude'),
					longitude: uni.getStorageSync('longitude'),
				}
				this.$Request.get("/app/userCertification/selectCertificationById", data).then(res => {
					if (res.code == 0) {
						if (res.data && res.data.name) {
							this.order = res.data
							this.title = res.data.name
							uni.setNavigationBarTitle({
								title: res.data.name
							})
							if (this.order.label) {
								this.order.label = this.order.label.split(",");
							}
							if (this.order.distance) {
								this.order.distance = this.order.distance
								if (parseFloat(this.order.distance).toFixed(2) >= 1000) {
									this.order.distance = (parseFloat(this.order.distance).toFixed(1) / 1000)
										.toFixed(
											1) + 'km'
								} else {
									this.order.distance = parseFloat(this.order.distance).toFixed(1) + 'm'
								}
							}

							this.getClassifyList()
							// this.order.detailsImg = this.order.detailsImg.split(",");
						}
						uni.hideLoading();
						this.loading = false
					}
				});

			},
			// 获取当前店铺列表数据
			getorderlist() {
				this.$Request.get("/app/orderTaking/selectMyReleases", {
					userId: this.shopUserId,
					page: this.page,
					limit: this.limit,
					status: '0'
				}).then(res => {
					if (res.code == 0) {
						for (var i = 0; i < res.data.list.length; i++) {
							res.data.list[i].gameName = res.data.list[i].gameName.split(",");
						}
						if (this.page == 1) {
							this.orderList = res.data.list
						} else {
							this.orderList = [...this.orderList, ...res.data.list]
						}
					}
				});

			},
			// 评论
			getOrderComment() {
				let that = this;
				this.$Request.get("/app/evaluate/getUserEvaluate", {
					riderUserId: this.sfUserId,
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {
						that.commentList = [...that.commentList, ...res.data.records]
					}
				});
			},
			playVoice() {
				console.log(this.isPlay)
				this.AUDIO.src = this.order.voiceIntroduce;
				if (this.isPlay) {
					this.AUDIO.stop();
				} else {
					this.AUDIO.play();
				}
				this.isPlay = !this.isPlay;
			},
			// 跳转订单
			goOrder(e) {
				let userId = uni.getStorageSync('userId')
				if (userId) {
					uni.navigateTo({
						url: '/pages/index/game/order?id=' + e.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getorderlist()
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getorderlist()
		},

	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.bgs {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.line_s {
		display: inline-flex;
		width: 14rpx;
		height: 14rpx;
		background: #1AD566;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.line_x {
		display: inline-flex;
		width: 14rpx;
		height: 14rpx;
		background: #000000;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.u-size-default {
		background: #557EFD !important;
	}

	.addbox {
		width: 600upx;
	}

	.btn {
		width: 686upx;
		height: 88upx;
		margin: 0 auto;
		background: #557EFD;
		border-radius: 49upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		position: fixed;
		bottom: 30upx;
		left: 0;
		right: 0;
	}

	.lab {
		background: #bdd5f8;
		color: #557EFD;
		padding: 4rpx 20rpx;
		border-radius: 6rpx;
		margin-right: 15rpx;
	}

	.rir {
		font-size: 30upx;
		font-family: DFZongYi-Bd-80-Win-GB;
		font-weight: 800;
		color: #30B47A;
		margin-right: 30rpx;
	}
</style>